<template>
  <div class="wrap">
    <el-dialog
      class="new-task-dialog"
      title="新增评分任务"
      :visible.sync="showDialog"
      width="70%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="name-wrap">
        任务名称：
        <el-input placeholder="录入评分任务名称" v-model="name"></el-input>
      </div>
      <el-table
        @current-change="handleCurrentChange"
        :data="modelList"
        highlight-current-row
        border
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="updateTime" label="最后更改日期" width="180"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPage"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="confirmNewTask">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  Button,
  Dialog,
  Input,
  Table,
  TableColumn,
  Pagination
} from "element-ui";
import { getUseableModelList } from "@/api/score.js";
export default {
  name: "new-score-task-dialog",
  props: {
    show: Boolean
  },
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination
  },
  data() {
    return {
      name: null,
      currentSelectId: null,
      showDialog: false,
      pageNum: 1,
      pageSize: 5,
      modelList: [],
      totalPage: 1
    };
  },
  methods: {
    handleCurrentChange(row) {
      if (row == null) {
        return;
      }
      const date = new Date();
      let dateStr =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      this.currentSelectId = row.id;
      this.name = dateStr + "-" + row.name;
    },
    refreshList() {
      getUseableModelList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
        .then(res => {
          this.modelList = res.list;
          this.modelList.forEach((item, index) => (item.index = index + 1));
          this.totalPage = res.total;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    changePage(pageNum){
        this.pageNum = pageNum;
        this.refreshList();
    },
    cancle() {
      this.$emit("cancle");
    },
    confirmNewTask() {
        this.$emit("confirmNewTask", {
            name: this.name,
            modelId: this.currentSelectId
        });
    }
  },
  watch: {
    show() {
      if (this.show) {
        this.refreshList();
        this.showDialog = true;
      } else {
        this.name = null;
        this.currentSelectId = null;
        this.showDialog = false;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .new-task-dialog {
    .name-wrap {
      .el-input {
        width: 400px;
      }
    }
  }
}
</style>